<script setup>
import { ref,onMounted } from 'vue'
import { queryNursingAll,addNursing,queryNursingById,updateNursing,deleteNursing } from '../../api/nursing'
import { ElMessage } from 'element-plus'

//定义nursingProjectDate的表单数据
const nursingProjectDate = ref({name:'',unit:'',createBy:''})

//定义显示表格数据的变量  
const tableDate = ref([])

//定义分页数据变量
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const handleSizeChange = (val) => {
  currentPage.value = 1
  queryNusringProjectAll()
}
const handleCurrentChange = (val) => {
  queryNusringProjectAll()
}
//查询的点击事件
const queryNusringProjectAll = async () => {
  const result = await queryNursingAll(currentPage.value,pageSize.value,nursingProjectDate.value.name,nursingProjectDate.value.unit,nursingProjectDate.value.createBy)
  tableDate.value = result.data.rows
  total.value = result.data.total
}
//清空的点击事件
const clear = () => {
  nursingProjectDate.value = {name:'',unit:'',createBy:''}
  queryNusringProjectAll()
}


//预加载
onMounted(()=>{
  queryNusringProjectAll()
})
//点击添加护理项目的点击事件
const add = () => { 
  title.value= '添加护理项目'
  dialogShow.value = true
  // 清空表单数据
  dialogData.value = {name:'',orderNo:'',unit:'',price:'',image:'',nursingRequirement:'',status:'',
  createBy:'',updateBy:'',remark:'',createTime:'',updateTime:''}
}
//点击保存的事件方法
const save = async () => { 
  let result = null
  if(dialogData.value.id){
    result = await updateNursing(dialogData.value)
  }else{
    result = await addNursing(dialogData.value)
  }
  if(result.code){
    queryNusringProjectAll()
    dialogShow.value = false
    ElMessage.success('操作成功')
  }else{
    ElMessage.error('操作失败')
  }
}

//修改回显的点击事件
const edit = async (id) => { 
  title.value= '修改护理项目'
  dialogShow.value = true
  const result = await queryNursingById(id)
  dialogData.value = result.data
}
//删除的点击事件
const deleteById = async (id) => { 
  const result = await deleteNursing(id)
  if(result.code){
    ElMessage.success('操作成功')
    queryNusringProjectAll()
  }else{
    ElMessage.error('操作失败')
  }
}

//定义弹除框的数据
const dialogData = ref({name:'',orderNo:'',unit:'',price:'',image:'',nursingRequirement:'',status:'',
  createBy:'',updateBy:'',remark:'',createTime:'',updateTime:''})
const title = ref(null)
const dialogShow = ref(false)

//图片上传
const handleAvatarSuccess = (response,uploadFile) => {
  dialogData.value.image = response.data
}
//图片提示信息
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('图片必须是JPG格式')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }
  return true
}
</script>

<template>
<!-- 表单提交数据 -->
  <div>
    <el-form :inline="true" :model="nursingProjectDate" class="demo-form-inline">
    <el-form-item label="护理名称">
      <el-input v-model="nursingProjectDate.name" placeholder="请输入姓名" />
    </el-form-item>
    <el-form-item label="单位">
      <el-input v-model="nursingProjectDate.unit" placeholder="请输入单位" />
    </el-form-item>
    <el-form-item label="创建人">
      <el-input v-model="nursingProjectDate.createBy" placeholder="请输入创建人" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="queryNusringProjectAll">查询</el-button>
      <el-button type="default" @click="clear">清空</el-button>
    </el-form-item>
  </el-form>
</div>
<div>
  <el-button type="primary" style="margin: 20px;" @click="add"> + 新增护理项目 </el-button>
</div>
<!-- 表格数据 -->
<div>
  <el-table :data="tableDate" border style="width: 100%">
    <el-table-column prop="id" label="主键ID" align="center"/>
    <el-table-column prop="name" label="护理名称" align="center"/>
    <el-table-column prop="unit" label="单位" align="center"/>
    <el-table-column prop="price" label="价格" align="center"/>
    <el-table-column label="图片">
      <template #default="scope" align="center">
        <img :src="scope.row.image" alt="" style="width: 70px; height: 70px;">
      </template>
    </el-table-column>
    <el-table-column prop="nursingRequirement" label="护理需求" align="center"/>
    <el-table-column prop="status" label="护理状态" >
      <template #default="scope">
        <!--两个等于是会进行类型转换后再比较值-->
        <!-- 三个等于不进行类型转换，值和类型都必须相同才返回 -->
        <el-tag align="center" v-if="scope.row.status == 0" type="error">禁用</el-tag>
        <el-tag align="center" v-else type="success">启用</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createBy" label="创建人" align="center"/>
    <el-table-column prop="updateBy" label="更新人" align="center"/>
    <el-table-column prop="remark" label="备注" align="center"/>
    <el-table-column prop="createTime" label="创建时间" align="center"/>
    <el-table-column prop="updateTime" label="更新时间" align="center"/>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" size="small" @click="edit(scope.row.id)">修改</el-button>
        <el-button type="danger" size="small" @click="deleteById(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
<!-- 分页 -->
<div>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 30, 40]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</div>
<!-- 弹出框 -->
<div>
  <el-dialog v-model="dialogShow" :title="title" width="500">
    <el-form :model="dialogData">
      <el-form-item label="护理项目名称" :label-width="formLabelWidth">
        <el-input v-model="dialogData.name" placeholder="请输入护理项目名称" />
      </el-form-item>
      <el-form-item label="排序号码" :label-width="formLabelWidth">
        <el-input v-model="dialogData.orderNo" placeholder="请输入排序数字" />
      </el-form-item>
      <el-form-item label="单位" :label-width="formLabelWidth">
        <el-input v-model="dialogData.unit" placeholder="单位名称" />
      </el-form-item>
      <el-form-item label="价格" :label-width="formLabelWidth">
        <el-input v-model="dialogData.price" placeholder="请输入价格" />
      </el-form-item>
      <el-form-item label="图片" :label-width="formLabelWidth">
        <el-upload
          class="avatar-uploader"
          action="/api/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="dialogData.image" :src="dialogData.image" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="护理需求" :label-width="formLabelWidth">
        <el-input v-model="dialogData.nursingRequirement" placeholder="请输入需求" />
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-select v-model="dialogData.status" placeholder="请选择是">
          <el-option label="启用" value="1" />
          <el-option label="禁用" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建人" :label-width="formLabelWidth">
        <el-input v-model="dialogData.createBy" placeholder="请输入创建人" />
      </el-form-item>
      <el-form-item label="更新人" :label-width="formLabelWidth">
        <el-input v-model="dialogData.updateBy" placeholder="请输入更新人" />
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="dialogData.remark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogShow = false" type="default">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </template>
  </el-dialog>
</div>
</template>

<style scoped>
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>